<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">      

    <ui:composition template="/WEB-INF/Template/Template.xhtml">
        <ui:define name="content">
            
            <h:form enctype="multipart/form-data" >
                <h:inputFile  value="#{dataBean.file}"  style="float:left;padding-top: 8px;" />
                &nbsp;&nbsp;<h:commandButton action="#{dataBean.upload()}" value="Importer Excel" style="text-shadow: none !important;box-shadow: none !important;font-weight:normal !important" styleClass="button" />
                <p:growl id="mess" globalOnly="5000" showDetail="true" showSummary="true" />
            </h:form>
            <br />
            <br />
            <br />
            <h:form>
                <p:dataTable styleClass="table" id="dataTable" var="inc" value="#{incidentBean.getinc()}"
                             paginator="true" rows="8" emptyMessage="Aucun résultat trouvé"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="8,16,32" sortMode="multiple" scrollable="true" scrollHeight="300" >
                    <f:facet name="header">
                        Les incidents
                    </f:facet> 
                    <p:column  filterBy="#{incidentBean.Week(inc.debutIncident)}" filterMatchMode="exact" rendererType="date" >
                        <f:facet name="header">  
                            Week
                        </f:facet>
                        <h:outputText value="#{incidentBean.Week(inc.debutIncident)}" >
                        </h:outputText>
                    </p:column>
                    <p:column headerText="N° Incident" filterBy="#{inc.nincident}" >
                        <f:facet name="header">  
                            N° Incident
                        </f:facet>
                        <h:outputText value="#{inc.nincident}" >
                        </h:outputText>
                    </p:column>

                    <p:column   filterBy="#{incidentBean.conv_date(inc.debutIncident)}" filterMatchMode="contains">
                        <f:facet name="header">  
                            Debut Incident
                        </f:facet>
                        <h:outputText value="#{incidentBean.conv_date(inc.debutIncident)}" >
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Fin Incident" filterBy="#{incidentBean.conv_date(inc.debutIncident)}" filterMatchMode="contains">
                        <f:facet name="header">  
                            Fin Incident
                        </f:facet>
                        <h:outputText value="#{incidentBean.conv_date(inc.debutIncident)}" >
                        </h:outputText>
                    </p:column>

                </p:dataTable>             
                <br />
                <h:commandLink>  
                    <p:graphicImage value="resources/images/excel.png" width="40" height="40" />  
                    <p:dataExporter type="xls" target="dataTable" fileName="incidents" />  
                </h:commandLink> 
                &nbsp;
                <h:commandLink>  
                    <p:graphicImage value="resources/images/pdf.png" width="30" height="40" />  
                    <p:dataExporter type="pdf" target="dataTable" fileName="incidents" />  
                </h:commandLink> 
            </h:form>



            <style type="text/css">
                .ui-datatable table {
                    border-collapse:collapse;
                    width:100%;
                    color: #91015e;
                }

                .ui-datatable .ui-datatable-header,
                .ui-datatable .ui-datatable-footer {
                    text-align:center;
                    padding:4px 10px 4px 10px;
                    background-color: #91015e;
                    background-image: none;
                    background-repeat: no-repeat;
                    color: white;
                    text-shadow: none;
                }

                .ui-datatable .ui-datatable-header {

                    border-bottom: 0px none;
                    background-color: #91015e;
                    background-image: none;
                    background-repeat: no-repeat;
                    color: white;
                    text-shadow: none;

                }

                .ui-datatable .ui-datatable-footer {
                    text-align:center;
                    border-top: 0px none;
                    background-color: #91015e;
                    background-image: none;
                    background-repeat: no-repeat;
                    color: white;
                    text-shadow: none;

                }

                .ui-datatable th, .ui-datatable tfoot td {
                    text-align:center;
                    padding:4px 10px 4px 10px;
                    background-color: #91015e;
                    background-image: none;
                    background-repeat: no-repeat;
                    color: white;
                    text-shadow: none;
                }

                .ui-datatable-data {

                }

                .ui-datatable .ui-datatable-data td {
                    border-right:1px solid;
                    padding:4px 10px 4px 10px;
                    
                }

                .ui-datatable .ui-paginator {
                    margin:0px;
                    border-top:0px none;
                    text-align: center;
                    padding:2px;
                    background-color: #c8c8c8;
                    background-image: none;
                    background-repeat: no-repeat;

                }

                .ui-datatable .ui-sortable-column {
                    cursor: pointer;

                }

                .ui-datatable .ui-sortable-column-icon {
                    float:right;
                }

                .ui-datatable .ui-column-filter {
                    display: block;
                    width:100px;
                    margin:auto;
                }

                .ui-datatable .ui-expanded-row {
                    border-bottom:0px none;
                }

                .ui-datatable .ui-expanded-row-content {
                    border-top:0px none;
                }

                .ui-datatable .ui-row-expander {
                    cursor: pointer;
                }

                .ui-datatable .ui-expansion-column {
                    width: 16px;
                }
            </style>
        </ui:define>
    </ui:composition>
</html>